import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Input, Select, Checkbox, Radio, Row, Col, Icon, Button, DatePicker, InputNumber, Message, Table, Upload, Modal} from 'antd';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const CheckboxGroup = Checkbox.Group;
import Region from '../../../../components/Region/RegionPC';
import BaseInfo from './baseInfo'
localStorage.renterFrontPic = JSON.stringify([]);
localStorage.renterBackPic = JSON.stringify([]);
let uuid = 0;
let nnid = 0;
const bankJson = [
  {
    name: "中国工商银行",
    code: "102"
  },
  {
    name: "中国农业银行",
    code: "103"
  },
  {
    name: "中国银行",
    code: "104"
  },
  {
    name: "中国建设银行",
    code: "105"
  },

  {
    name: "中信银行",
    code: "107"
  },
  {
    name: "中国光大银行",
    code: "108"
  },
  {
    name: "兴业银行",
    code: "114"
  }
]
let SignUpModify = React.createClass({

  contextTypes: {
    router: React.PropTypes.object,
  },

  getInitialState() {
    return {
      loading: false,
      forms:{},
      imgList: [], //图片数组
      rentContractList: [], // 租赁合约列表
      cardList:[],
      roomList: [], //房间数组
      rentChecked: {},
      roomChecked: {},
      freeArr: [],
      depositArr: [],
      rentItemList: [], // 租金包含
      tempFree: {},
      rentItemData: [],
      roomItemData: [],
      tempDeposit: {},
      isNote: 0,
      priviewImage: null,
      priviewVisible: false,
      signData: {},
      province: '110000', // 省
      city: '110100',  // 城市
      district: '110101', // 区域
      areaId: '110101',
      rentContractArr: [],
      cardArr: [],
      renterFrontPic: [],
      renterBackPic: [],
      otherRenterInfo: []
    }
  },
  componentDidMount() {
    this.setState({
      signData: this.props.location.state,
    })
    this.fetchForms();
    this.fetchRentItem();
    this.fetchRoom();
  },
  // 处理数据,获取数组
  getArry (data) {
  　　let arry = [];
  　　let obj = {};
      let keyArry = [];
      for(let key in data) {
  　　　　let curKey = parseInt(key.replace(/[^0-9]+/g, '')); // 获取key里的数字标记
  　　　　let keyName =key.replace(/[^a-zA-Z]+/g, ''); // 获取 key里的字段名称
         if(!isNaN(curKey)){// 过滤掉不包含数字标记的
    　　　　obj = {
      　　　　'renterAddress':data[`${curKey}renterAddress`] || '',
      　　　　'renterCompany':data[`${curKey}renterCompany`] || '',
      　　　　'renterName':data[`${curKey}renterName`] || '',
      　　　　'renterNo':data[`${curKey}renterNo`] || '',
      　　　　'renterSex':data[`${curKey}renterSex`] || '',
             'renterPhone':data[`${curKey}renterPhone`] || '',
             'renterFrontPic': JSON.parse(localStorage[`renterFrontPic${curKey}`]) || [],
             'renterBackPic': JSON.parse(localStorage[`renterBackPic${curKey}`]) || [],
    　　　　}
            if(keyArry.indexOf(`${curKey}`) !== -1) {

            }else{
              keyArry.push(`${curKey}`);
              arry.push(obj);
            }
　　      }
  　　}
      return arry;
  },
  handleSubmit(e) {
    e.preventDefault(); 
    let rentItem = {rentItemList: this.state.rentItemList};
    let rommId = this.props.location.state;
    let otherFeeList = {otherFeeList: this.setFieldArr(this.state.tempFree, this.state.freeArr)};
    let depositList = {depositList: this.setFieldArr(this.state.tempDeposit, this.state.depositArr)};
    let picList = {picList: this.state.cardList.concat(this.state.rentContractList)};
    let forms = this.props.form.getFieldsValue();
    let BaseInfoValue = this.refs.BaseInfo.getFieldsValue();
    let rooms = {roomList: this.state.roomList};
    let isNote = {isNote: this.state.isNote};
    let time = {startTime: Utils.formatDate(forms.startTime), endTime: Utils.formatDate(forms.endTime), nextRentTime: Utils.formatDate(forms.nextRentTime)};
    let params;
    if(forms.isDeduct==1){
      let regionCom=this.refs.region;
      let region = {province: this.state.province, provinceName:regionCom._selectedProvinceName,city: this.state.city,cityName:regionCom._selectedCityName};
       params = Object.assign({}, rommId, forms, rentItem, region,rooms, picList, otherFeeList, depositList, time, isNote);
    }else{
       let isDeduct={isDeduct:-1}
       params = Object.assign({}, rommId, forms,isDeduct, rentItem,rooms, picList, otherFeeList, depositList, time, isNote);
    }

    let flageBaseInfo = false; // BaseInfo校验是否通过
    let flageForm = false; // 当前form校验是否通过
    this.refs.BaseInfo.validateFields({ force: true },(errors, values) => {
      if (!!errors) {
        console.log('BaseInfo!!!');
        flageBaseInfo = false;
        return;
      }
      flageBaseInfo = true;
    });
    this.props.form.validateFields((errors, values) => {
      if (!!errors) {
        console.log('Errors in form!!!');
        flageForm = false;
        return;
      }
      flageForm = true;
    });
    if(flageForm && flageBaseInfo) { // 同时校验通过
      let otherRenterInfo = this.getArry(BaseInfoValue);
      params.otherRenterInfo = otherRenterInfo;
      params.mainRenterFrontPic = JSON.parse(localStorage.renterFrontPic); // 固定承租人 正面照片
      params.mainRenterBackPic = JSON.parse(localStorage.renterBackPic); // 固定承租人 反面照片
      params.renterAddress = BaseInfoValue.renterAddress;
      params.renterCompany = BaseInfoValue.renterCompany;
      params.renterName = BaseInfoValue.renterName;
      params.renterNo = BaseInfoValue.renterNo;
      params.renterPhone = BaseInfoValue.renterPhone;
      params.renterSex = BaseInfoValue.renterSex;

      this.setState({
        loading: true,
      });
      Utils.sendAjax({
        url: '/rent/contract/doUpdate',
        data: JSON.stringify(params),
        method: 'post',
        callback: (result) => {
          if (result.code === '200') {
           this.handleBack()
          } else {
            this.setState({
              loading: false,
            });
            Message.error(result.message, 10);
          }
        }
      });
    }
    
  },
  // 图片显示参数重构
  resetImgUrl(imgArry) {
      if(imgArry.length > 0) {
          imgArry.forEach((item) => {
              let length = item.url.split('/').length;
              let id = item.url.split('/')[length-1].split('.')[0];

              let imgMaps = {
                  uid: id,
                  type: item.type,
                  status: 'done',
                  url: Utils.apiServer + item.url,
                  thumbUrl: Utils.apiServer + item.url,
              };
              if (item.type == 'card') {
                  let curKey = parseInt(item.flag.replace(/[^0-9]+/g, '')); // 获取flag里的数字标记
  　　　　       let keyName =item.flag.replace(/[^a-zA-Z]+/g, ''); // 获取 flag里的字段名称
                  
                  if(item.flag === 'renterFrontPic'){
                      
                      let renterFrontPic = this.state.renterFrontPic;
                      renterFrontPic.push(imgMaps)
                      localStorage.renterFrontPic = JSON.stringify(renterFrontPic);
                      this.setState({
                          renterFrontPic: renterFrontPic
                      });
                  }else if(item.flag === 'renterBackPic'){
                      let renterBackPic =  this.state.renterBackPic;
                      renterBackPic.push(imgMaps)
                      localStorage.renterBackPic = JSON.stringify(renterBackPic);
                      this.setState({
                          renterBackPic: renterBackPic
                      });
                  }
                  // if(!isNaN(curKey)){
                  //     let arry = [];
                  //     arry.push(imgMaps)
                  //     localStorage[item.flag] = JSON.stringify(arry);
                  //     let obj = {};
                  //     obj[item.flag] = arry;
                  //     this.setState(obj); 
                  // }
                  
              }
          })
      } 
  },
  getPicData(imgArry) {
    let newArry = [];
    if(imgArry.length > 0){
      imgArry.forEach((item) => {
          
          let length = item.url.split('/').length;
          let id = item.url.split('/')[length-1].split('.')[0];

          let imgMaps = {
              uid: id,
              type: item.type,
              status: 'done',
              url: Utils.apiServer + item.url,
              thumbUrl: Utils.apiServer + item.url,
          };
          if (item.type == 'card') {
          
            let curKey = parseInt(item.flag.replace(/[^0-9]+/g, '')); // 获取flag里的数字标记
    　　　　 let keyName =item.flag.replace(/[^a-zA-Z]+/g, ''); // 获取 flag里的字段名称
            newArry.push(imgMaps)
          } 
      })
      return newArry
    }
    
  },
  getOtherRenterInfo(data) {
      data.forEach(item => {
        let renterFrontPic = this.getPicData(item.renterFrontPic);
        let renterBackPic = this.getPicData(item.renterBackPic);
        item.renterFrontPic = renterFrontPic;
        item.renterBackPic = renterBackPic;
      })
      console.log('data',data)
      return data;
  },
  fetchForms() {
    let _me = this;
    let params = this.props.location.state;
    Utils.sendAjax({
      url: '/rent/contract/update',
      data: JSON.stringify(params),
      method: 'post',
      callback: (result) => {
        if (result.code === '200') {
          let newStr = _me.state.rentChecked;
          result.data.rentItemList.forEach((item) => {
            newStr[item] = true
          })
          _me.resetImgUrl(result.data.renterFrontPic);
          _me.resetImgUrl(result.data.renterBackPic);
          let otherRenterInfo = this.getOtherRenterInfo(result.data.otherRenterInfo);
          // console.log(otherRenterInfo)
          _me.setState({
            forms: result.data,
            areaId: result.data.city,
            province: result.data.province,
            city: result.data.city,
            isNote: result.data.isNote,
            rentItemList: result.data.rentItemList,
            freeArr: result.data.otherFeeList,
            depositArr: result.data.otherDepositList,
            rentChecked: newStr,
            otherRenterInfo: otherRenterInfo
            // renterFrontPic: result.data.renterFrontPic,
            // renterBackPic: result.data.renterBackPic,
          })
          // localStorage.renterFrontPic = JSON.stringify(result.data.renterFrontPic);
          // localStorage.renterBackPic = JSON.stringify(result.data.renterBackPic);
          _me.refs.BaseInfo.setFieldsValue(result.data);
          _me.setImgUrl(result.data.picList);
        } else {
          Message.error(result.message, 10)
        }
      }
    });
  },

  // setImgUrl(img) {
  //   let card = [];
  //   img.forEach((item, index) => {
  //     let imgMaps = {
  //       uid: `card-`+index,
  //       type: item.type,
  //       status: 'done',
  //       url: Utils.apiServer + item.url,
  //       thumbUrl: Utils.apiServer + item.url,
  //     };
  //     card.push(imgMaps);
  //   })
  //   this.setState({
  //     imgList: card
  //   })
  // },
  // 图片显示参数重构
  setImgUrl(img) {
    let cardList = [];
    let rentContractList = [];
    let newState = [];
    img.forEach((item) => {
      let length = item.url.split('/').length;
      let id = item.url.split('/')[length-1].split('.')[0];

      let imgMaps = {
        uid: id,
        type: item.type,
        status: 'done',
        url: Utils.apiServer + item.url,
        thumbUrl: Utils.apiServer + item.url,
      };
      if (item.type == 'card') {
        cardList.push(imgMaps)
      }else if(item.type == 'rentContract'){
        rentContractList.push(imgMaps)
      }
       newState.push(imgMaps);
    })
    this.setState({
      cardList: cardList,
      rentContractList: rentContractList,
      imgList: newState
    })
  },

  fetchRentItem() {
    let _me = this;
    Utils.sendAjax({
      url: '/rent/include/list',
      method: 'post',
      data: JSON.stringify({rentContractId: 0}),
      callback: (result) => {
        if (result.code === '200') {
          let newState = _me.state.rentItemData;
          let newStr = _me.state.rentChecked;
          result.data.forEach((item) => {
            let str = {};
            if (item.name) {  str['label'] = item.name; }
            if (item.id) {  str['value'] = item.id.toString();}
            newStr[item.id] = false;
            newState.push(str);
          })
          _me.setState({
            rentItemData: newState,
            rentChecked: newStr,
          })
        } else {
          Message.error(result.message, 10)
        }
      }
    });
  },

  // 获取空置房间项
  fetchRoom() {
    let rentContractId = this.props.location.state.rentContractId;
    let _me = this;
    Utils.sendAjax({
      url: '/rent/contract/room/list',
      method: 'post',
      data: JSON.stringify({rentContractId: rentContractId}),
      callback: (result) => {
        if (result.code === '200') {
          let newStr = _me.state.roomItemData;
          let newState = _me.state.roomList;
          result.data.forEach((item) => {
            let str = {};
            if (item.roomName) {
              str['label'] = item.roomName;
            }
            if (item.id) {
              str['value'] = item.id.toString();
              newState.push(item.id.toString())
            }
            newStr.push(str);
          })
          _me.setState({
            roomItemData: newStr,
            roomList: newState
          })
        } else {
          Message.error(result.message, 10)
        }
      }
    });

  },

  handleCancel() {
    this.setState({
      priviewVisible: false,
    });
  },


  // 租金包含项选择函数
  handleCheck(filed, value) {
    let newRent = this.state.rentItemList;
    let newRoom = this.state.roomList;
    let key = value.target.value;
    if (value.target.checked) {
      if (filed == 'roomList') {
        newRoom.push(key);
      } else {
        newRent.push(key);
      }
    } else {
      if (filed == 'roomList') {
        let index = newRoom.indexOf(key);
        if (index > -1) {
          newRoom.splice(index, 1);
        }
      } else {
        let index = newRent.indexOf(key);
        if (index > -1) {
          newRent.splice(index, 1);
        }
      }
    }
    this.setState({
      rentItemList: newRent,
      roomList: newRoom
    })
  },

  // 添加一行费用项
  addFree() {
    return Message.warning('修改中费用不能新增')
    if (uuid > 4) {
      return Message.warning('新增费用不能超过5项')
    }
    uuid++;
    let newArr = this.state.freeArr;
    newArr.push(uuid);
    this.setState({
      freeArr: newArr
    })
  },

  removeFree(k) {
    return Message.warning('修改中费用不能删除')
    uuid--;
    let newArr = this.state.freeArr;
    let index = newArr.indexOf(k);
    if (index > -1) {
      newArr.splice(index, 1);
    }
    this.setState({
      freeArr: newArr
    })
  },

  // 添加一行费用项
  addDeposit() {
    return Message.warning('修改中押金不能新增')
    if (nnid > 4) {
      return Message.warning('新增押金不能超过5项')
    }
    nnid++;
    let newArr = this.state.depositArr;
    newArr.push(nnid);
    this.setState({
      depositArr: newArr
    })
  },

  removeDeposit(k) {

    return Message.warning('修改中押金不能删除')
    nnid--;
    let newArr = this.state.depositArr;
    let index = newArr.indexOf(k);
    if (index > -1) {
      newArr.splice(index, 1);
    }
    this.setState({
      depositArr: newArr
    })
  },

  rowKey(data) {
    return data.id;
  },

  handleFree(e) {
    let newStr = this.state.tempFree;
    let name = e.target.id;
    let value = e.target.value;
    newStr[name] = value;
    this.setState({
      tempFree: newStr
    })
  },

  handleDeposit(e) {
    let newStr = this.state.tempDeposit;
    let name = e.target.id;
    let value = e.target.value;
    newStr[name] = value;
    this.setState({
      tempDeposit: newStr
    })
  },
  hasBank(value) {
    const formsData = this.state.forms;
    if (formsData.province) {
      this.setState({
        isDeduct: value,
        province: formsData.province, // 省
        city: formsData.city,  // 城市
        areaId: formsData.city,
      })
    } else {
      this.setState({
        isDeduct: value,
        province: '110000', // 省
        city: '110100',  // 城市
        district: '110101', // 区域
        areaId: '110101',
      })
    }
  },
    //省市下拉
  changeAreaId(area) {
    selectedArea = String(area);
    var selectedProvince = selectedArea.substr(0, 2) + "0000";
    var selectedCity = selectedArea.substr(0, 4) + "00";
    this.setState({
      province: selectedProvince,
      city: selectedCity,
      areaId: area,
    })
  },
  setFieldArr(obj, len) {
    let newArr = [];
    len.map((k) => {
      let newObj = {};
      for (let o in obj) {
        let arr = o.split('-');
        let key = arr[0];
        if (arr[1] == k && arr[1] !== '') {
          newObj[key] = obj[o];
        }
      }
      if (!newObj) {return}
      newArr.push(newObj);
    })
    return newArr;
  },

  handleMessage(e) {
    let newStr =  e.target.checked ? 1 : 0;
    this.setState({
      isNote: newStr
    })
  },

  // deleteImg(file) {
  //   let newArr = [];
  //   let imgs = this.state.imgList;
  //   imgs.forEach((img, index)=> {
  //     if (img.uid !== file.uid) {
  //       newArr.push(img)
  //     }
  //   })
  //   this.setState({
  //     imgList: newArr
  //   })
  //   this.setImgUrl(newArr);
  // },
  deleteImg(file) {
    let newArr = [];
    let imgs = this.state.imgList;
    let rentContractPic = [];
    let cardPic = [];
    let rentContractArr = this.state.rentContractArr;
    let cardArr = this.state.cardArr;
    imgs.forEach((img, index)=> {
      if (img.url && img.url !== file.url) {
        newArr.push(img)
      }
    })
      rentContractArr.forEach((i,index)=> {
      if(i.url[0] && i.url[0] !== file.url){
        rentContractPic.push(i)
      }
    })
      cardArr.forEach((i,index)=> {
      if(i.url[0] && i.url[0] !== file.url){
        cardPic.push(i)
      }
    })
    this.setState({
      imgList: newArr,
      rentContractArr: rentContractPic,
      cardArr: cardPic,
    })
    this.setImgUrl(newArr);
  },
  messageInfo() {
    Message.warning('图片不可删除');

  },

  handleBack() {
    let goPathUrl = '/landlord/rentManage/signUpOrder/list';
    let params = this.props.location.state;
    this.context.router.push({pathname: goPathUrl,state: {...params}});
  },
  updateState(states) {
    this.setState(states);
  },
  render() {
    const { getFieldProps } = this.props.form;
    const _me = this;
    const formsData = this.state.forms;
    let imgList = this.state.imgList;
    var isDeduct;
    if(_me.state.isDeduct){
      isDeduct=_me.state.isDeduct;
    }else{
      isDeduct= formsData.isDeduct;
    }
    let rentContractArr = this.state.rentContractArr;
    let cardArr = this.state.cardArr;
     if (rentContractArr.length == 0){
       imgList.map((item)=> {
      if(item.type == 'rentContract'){
        rentContractArr.push({type: 'rentContract', url: [item.url]})
      }
    })
    }
    if (cardArr.length == 0){
       imgList.map((item)=> {
      if(item.type == 'card'){
        cardArr.push({type: 'card', url: [item.url]})
      }
    })
    }
    let rentItemData = this.state.rentItemData ? this.state.rentItemData : [];
    let roomItemData = this.state.roomItemData ? this.state.roomItemData : [];
    let signData = this.state.signData;
    const rentOptions = rentItemData.map((item) => {
      let checked = this.state.rentChecked[item.value];
      return (
        <Checkbox key={`rent-${item.value}`} checked={ checked }
                  value={item.value} onChange={this.handleCheck.bind(this, 'rentItemList')} disabled>{item.label}</Checkbox>
      )
    });

    const roomOptions = roomItemData.map((item) => {
      return (
        <Checkbox key={`rent-${item.value}`} value={item.value}  checked={ true } onChange={this.handleCheck.bind(this, 'roomList')} disabled>{item.label}室</Checkbox>
      );
    })

    let freeArr = this.state.freeArr;
    let depositArr = this.state.depositArr;

    const formFree = freeArr.map((item, k) => {
      let feeName = `feeName-${k}`;
      let amount = `feeAmount-${k}`;
      return (
        <div key={`free-${k}`}>
          <Input id={feeName} defaultValue={item.feeName}
                 style={{width: 130, marginRight: 20}} onChange={this.handleFree} placeholder="请输入费用名称" disabled/>
          <Input id={amount} defaultValue={item.amount}
                 style={{width: 130, marginRight: 20}} onChange={this.handleFree} placeholder="请输入费用金额" disabled/>
          {signData.status == 1 ? <span className="addfree-btn" onClick={this.removeFree.bind(this, k)}><Icon type="cross" /></span> : ''}

        </div>
      )
    });

    const formDeposit = depositArr.map((k) => {
      let depositName = `depositName-${k.id}`;
      let deposit = `deposit-${k.id}`;
      return (
        <div key={`deposit-${k.id}`}>
          <Input id={depositName} defaultValue={k.depositName}
                 style={{width: 130, marginRight: 20}} onChange={this.handleDeposit} placeholder="请输入押金名称" disabled/>
          <Input id={deposit} defaultValue={k.deposit}
                 style={{width: 130, marginRight: 20}} onChange={this.handleDeposit} placeholder="请输入押金金额" disabled/>
          {signData.status == 1 ? <span className="addfree-btn" onClick={this.removeDeposit.bind(this, k.id)}><Icon type="cross" /></span> : ''}
        </div>
      )
    });
    let rentContract = {
      name: 'file',
      data: {nid: 'rentContract'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: true,
      fileList: this.state.rentContractList,
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        if (!isSize) {
          Message.error('你选择的图片过大！', 10);
          return isSize
        }
      },
      onChange: function (files) {
        let imgList = _me.state.imgList;
        let status = files.file.status
        if (status == 'done') {
          let file = files.file;
          let img = file.response ? file.response.data : '';
           img.map((item)=> {
             imgList.push({type: 'rentContract', url: item});
          })

           rentContractArr.push({type: 'rentContract', url: img});
          if(files.fileList.length == rentContractArr.length){
              _me.setImgUrl(imgList);
          }
        }
      },
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      },
      onRemove: (file) => {
        signData.status == 1 ?
          _me.deleteImg(file) : _me.messageInfo();
      }
    };
    let card = {
      name: 'file',
      data: {nid: 'card'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: true,
      fileList: this.state.cardList,
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        if (!isSize) {
          Message.error('你选择的图片过大！', 10);
          return isSize
        }
      },
      onChange: function (files) {
        let imgList = _me.state.imgList;
        let status = files.file.status;
        if (status == 'done') {
          let file = files.file;
          let img = file.response ? file.response.data : '';
          img.map((item)=> {
             imgList.push({type: 'card', url: item});
          })
         
            cardArr.push({type: 'card', url: img});
          if(files.fileList.length == cardArr.length){
              _me.setImgUrl(imgList);
          }
        }
      },
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      },
      onRemove: (file) => {
        signData.status == 1 ?
        _me.deleteImg(file) : _me.messageInfo();
      }
    };
    let bankItem = bankJson.map((item) => {
      return (
        <Option key={`item-${item.code}`} value={item.name}>{item.name}</Option>
      )
    })

    let isDisabled = signData.status != 1  || signData.actionType === 'check'? true : false
    let BaseInfoProps = {
      isDisabled: isDisabled,
      renterFrontPic: this.state.renterFrontPic,
      renterBackPic: this.state.renterBackPic,
      otherRenterInfo: this.state.otherRenterInfo,

      flag: 'modify',
      updateState: this.updateState
    }
    // console.log([JSON.parse(localStorage.renterFrontPic))
    return (
      <div >
        
        <BaseInfo ref="BaseInfo" {...BaseInfoProps}/>
        <Form inline form={this.props.form}>
          <div className="form-group">
             { /*基本信息*/ }
            
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="租赁方式">
                  <span>&nbsp;押&nbsp;</span>
                  <Select defaultValue="1" {...getFieldProps('depositPeriod', {initialValue: formsData.depositPeriod ? formsData.depositPeriod : '1'})} style={{width: 60}} disabled>
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                  </Select>
                  <span>&nbsp;付&nbsp;</span>
                    <Input {...getFieldProps('rentPeriod', {initialValue : formsData.rentPeriod ? formsData.rentPeriod : '1'})} style={{width: 60}} disabled/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="合约开始时间">
                  <DatePicker {...getFieldProps('startTime', {initialValue: formsData.startTime,
                    rules: [{ required: true, message: '合约开始时间不可为空' }]})} style={{width: 162}} disabled />
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="合约结束时间">
                  <DatePicker {...getFieldProps('endTime', {initialValue: formsData.endTime,
                    rules: [{ required: true, message: '合约结束时间不可为空' }]})} style={{width: 162}} disabled/>
                </FormItem>
              </Col>
            </Row>
            {isDeduct == -1 ?
              <Row gutter={24}>
                <Col sm={8}>
                  <FormItem label="是否需要代扣">
                    <Select {...getFieldProps('isDeduct', { initialValue: isDeduct, rules: [{ required: true, message: '请选择是否代扣', type: 'number' }] }) }
                      disabled={formsData.bankStatus < 0 && isDisabled} style={{ width: 162 }} onChange={this.hasBank} >
                      <Option value={1}>是</Option>
                      <Option value={-1}>否</Option>
                    </Select>
                  </FormItem>
                </Col>
              </Row> :
              <div>
                <Row gutter={24}>
                  <Col sm={8}>
                    <FormItem label="是否需要代扣">
                      <Select  {...getFieldProps('isDeduct', { initialValue: isDeduct, rules: [{ required: true, message: '请选择是否代扣', type: 'number' }] }) }
                        style={{ width: 162 }} disabled={formsData.bankStatus < 0 && isDisabled} onChange={this.hasBank}>
                        <Option value={1}>是</Option>
                        <Option value={-1}>否</Option>
                      </Select>
                    </FormItem>
                  </Col>
                  <Col sm={8}>
                    <FormItem label="银行名称">
                      <Select defaultValue="102" {...getFieldProps('bankName', { initialValue: formsData.bankName, rules: [{ required: true, message: '银行名称不可为空' }] }) }
                        disabled={formsData.bankStatus < 0 && isDisabled} style={{ width: 162 }}>
                        {bankItem}
                      </Select>
                    </FormItem>
                  </Col>
                  <Col sm={8}>
                    <FormItem label="银行卡号">
                      <Input {...getFieldProps('accountNo', { initialValue: formsData.accountNo, rules: [{ required: true, message: '银行卡号不可为空' }] }) }
                        disabled={formsData.bankStatus < 0 && isDisabled}/>
                    </FormItem>
                  </Col>
                </Row>
                <Row gutter={24}>
                  <Col sm={8}>
                    <FormItem label="银行开户名">
                      <Input {...getFieldProps('accountName', { initialValue: formsData.accountName, rules: [{ required: true, message: '银行开户名不可为空' }] }) }
                        disabled={formsData.bankStatus < 0 && isDisabled} />
                    </FormItem>
                  </Col>
                  <Col sm={16}>
                    <div className="ant-form-item">
                      <label className="ant-form-item-required">开户行地区</label>
                      <div className="">
                        <div className="ant-form-item-control ">
                          <Region areaId={this.state.areaId} ref="region" onAreaChange={this.changeAreaId}  disabled={formsData.bankStatus < 0 && isDisabled}/>
                        </div>
                      </div>
                    </div>
                  </Col>
                </Row>
              </div>
            }
            {
            //   <Row gutter={24} className="pic-box">
            //   <Col sm={24} className="img-label-wrap">
            //     <FormItem
            //       label="证件图片">
            //       {
            //         isDisabled? '暂无图片':
            //         <Upload {...card} >
            //           <div className="img-icon">
            //             <Icon type="plus"/>
            //             <h5>添加</h5>
            //           </div>
            //         </Upload>
            //       }
                  
            //     </FormItem>
            //   </Col>
            // </Row>
            }
            
            <Row gutter={24} className="pic-box">
              <Col sm={24} className="img-label-wrap">
                <FormItem
                  label="租赁合约">
                   {
                    isDisabled? '暂无图片':
                    <Upload {...rentContract} >
                      <div className="img-icon">
                        <Icon type="plus"/>
                        <h5>添加</h5>
                      </div>
                    </Upload>
                  }
                  
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={16} >
                <FormItem
                  label="备注">
                  <Input type="textarea" {...getFieldProps('remark', {initialValue: formsData.remark})} style={{width: 360}} disabled={isDisabled}/>
                </FormItem>
              </Col>
            </Row>
          </div>
          
          <div className="form-group">
            <h3><span>费用信息</span></h3>
            <Row gutter={24}>
              <Col sm={24}>
                <FormItem label="租赁房间" className="form-checkbox-wrapper">
                  {roomOptions}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="合约租金">
                  <Input {...getFieldProps('rent', {initialValue: formsData.rent ? formsData.rent.toFixed(2) : '0.00',
                    rules: [{ required: true,  message: '合约租金不可为空' }]})} style={{width: 162}} disabled/>
                  <span>元/月</span>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="订金">
                  <Input {...getFieldProps('reserveAmount', {initialValue: formsData.reserveAmount ? formsData.reserveAmount.toFixed(2) : '0.00',
                    rules: [{required: true, message: '定金不可为空'}]})} style={{width: 162}} disabled/>
                  <span>元</span>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="合约押金">
                  <Input {...getFieldProps('deposit', {initialValue: formsData.deposit ? formsData.deposit.toFixed(2) : '0.00',
                    rules: [{ required: true,  message: '合约押金不可为空' }]})} style={{width: 162}} disabled/>
                  <span>元</span>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="中介费">
                  <Input {...getFieldProps('agencyFee', {initialValue: formsData.agencyFee ? formsData.agencyFee.toFixed(2): '0.00'})} style={{width: 162}} disabled/>
                  <span>元</span>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={24}>
                <FormItem label="租金包含费用" className="form-checkbox-wrapper">
                  {rentOptions}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={12}>
                <FormItem label="其它费用">
                  {!isDisabled ? <span className="addfree-btn" onClick={this.addFree} ><Icon type="plus"/></span> : ''}

                </FormItem>
              </Col>
              <Col sm={12}>
                <FormItem label="其它押金">
                  {!isDisabled ? <span className="addfree-btn" onClick={this.addDeposit} ><Icon type="plus"/></span> : ''}

                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={10} offset={2}>
                <FormItem >
                  {formFree}
                </FormItem>
              </Col>
              <Col sm={10} offset={2}>
                <FormItem >
                  {formDeposit}
                </FormItem>
              </Col>
            </Row>
          </div>
          {/***
            <div className="form-group">
            <h3><span>收租设置</span></h3>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="收费提前通知">
                  <Input {...getFieldProps('rentNoticeDay', {initialValue: formsData.rentNoticeDay})} style={{width: 100}} disabled/>天
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem >
                  <Checkbox {...getFieldProps('isNote')}
                    checked={this.state.isNote == 1 ? true : false}  disabled={isDisabled}
                    onChange={this.handleMessage} >短信通知租客</Checkbox>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="下次交租时间">
                  <DatePicker {...getFieldProps('nextRentTime', {initialValue: formsData.nextRentTime,
                    rules: [{ required: true, type: 'string', message: '下次交租时间不可为空' }]})} style={{width: 162}} disabled />
                </FormItem>
              </Col>
            </Row>
          </div>
         */}
          
          <Row gutter={24} style={{margin: 20}}>
            <Col sm={8} offset={3}>
              <FormItem >
                {!isDisabled ? <div>
                  <Button type="primary" onClick={this.handleSubmit}>出租</Button>
                  <Button style={{marginLeft: 20}} onClick={this.handleBack}>返回</Button>
                </div> : ''}

              </FormItem>
            </Col>
          </Row>
        </Form>
        <Modal visible={this.state.priviewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" src={this.state.priviewImage} width="500"/>
        </Modal>
      </div>
    );
  }
});

SignUpModify = Form.create()(SignUpModify);
export default SignUpModify;